<template>
  <el-card class="box-card" style="margin: 10px 0px">
    <div slot="header" class="clearfix">
      <!--左侧内容-->
      <el-tabs class="tab" v-model="activeName">
        <el-tab-pane label="销售额" name="销售额"></el-tab-pane>
        <el-tab-pane label="访问量" name="访问量"></el-tab-pane>
      </el-tabs>
      <!--右侧内容-->
      <div class="right">
        <span>今日</span>
        <span>本周</span>
        <span>本月</span>
        <span>本年</span>
        <el-date-picker
          class="data"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="mini"
        >
        </el-date-picker>
      </div>
    </div>
    <div class="context">
      <el-row :gutter="10">
        <el-col :span="18">
          <div class="charts" ref="charts">
            <BarCharts></BarCharts>
          </div>
        </el-col>
        <el-col :span="6" class="right">
          <h3>门店销售额</h3>
          <ul>
            <li>
              <span>0</span>
              <span>肯德基</span>
              <span>123456</span>
            </li>
          </ul>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script>
import BarCharts from "@/views/dataset/Sale/barCharts/index.vue";

export default {
  name: "index",
  components: {
    BarCharts
  },
  data() {
    return {
      activeName: '销售额',
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
}
</script>

<style>
.clearfix {
  position: relative;
  display: flex;
  justify-content: space-between;
}

.tab {
  width: 100%;
}

.right {
  position: absolute;
  right: 0px;
}

.right span {
  margin: 0px 10px;
}

.data {
  width: 200px;
  margin: 0px 20px;
}

.right span{
  margin: 0px 30px;
}

.charts {
  width: 100%;
  height: 300px;
}

ul {
  list-style: none;
  width: 100%;
  height: 300px;
  padding: 0px;
}

ul li {
  display: inline;
  width: 8%;
}

</style>
